<script setup></script>

<template>
  <section>
    <div class="app-scrollbar">
      <router-view v-slot="{ Component, route }">
        <transition name="el-fade-in" mode="out-in">
          <keep-alive>
            <component :is="Component" :key="route.path" class="app-container app-container-grow" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </section>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.app-main {
  display: flex;
  width: 100%;
}

.app-scrollbar {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  overflow: auto;

  @extend %scrollbar;

  .app-container-grow {
    flex-grow: 1;
  }
}
</style>
